<script setup>

import {inject, onMounted, ref} from "vue";

const bus = inject('bus')
const list = ref({})


const onClose = (item) => {
    delete list.value[item.id]
}
const onOpen = () => {
    show.value = true
}

onMounted(() => {
    bus.on('progress', (json) => {
        list.value[json.data.id] = json.data
        // if(Object.keys(list.value).length > 2){
        //     delete list.value[Object.keys(list.value)[0]]
        // }
    })
})

</script>

<template>
    <el-row class="notification" v-if="Object.keys(list).length > 0">
        <el-row class="status" align="middle">
            <el-col :span="12">处理进度</el-col>
            <el-col :span="12" >
<!--                <el-row justify="end">-->
<!--                    <el-icon style="cursor: pointer" @click="onClose"><Close /></el-icon>-->
<!--                </el-row>-->
            </el-col>
        </el-row>
        <el-row class="content">
            <template v-for="(item,index) in list" :key="index">
                <el-row class="content-item" >
                    <el-row class="item-title">
                        <el-col :span="12">{{ item.title }}</el-col>
                        <el-col :span="12" >
                            <el-row justify="end" align="middle" style="margin-right: 10px">
                                <el-icon style="cursor: pointer" v-if="Math.abs(item.current) >=100"
                                         @click="onClose(item)"><Close /></el-icon>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row class="item-con" >
                        <el-progress striped :percentage="Math.abs(item.current)" :status="item.status" style="width: 100%" />
                    </el-row>
                </el-row>
            </template>
        </el-row>
    </el-row>
</template>

<style scoped lang="scss">
.notification{
    user-select: none;
    position: absolute;
    z-index: 99;
    bottom: 0;
    right: 0;
    width: 350px;
    max-height: 200px;
    border: 1px solid var(--el-border-color);

    .status{
        font-weight: bold;
        font-size: 16px;
        width: 100%;
        height: 40px;
        padding: 0 10px;
        background-color: var(--el-color-primary-light-9);
    }

    .content{
        width: 100%;
        max-height: 150px;
        padding: 5px;
        display: flex;
        flex-direction: row; /* 保持垂直布局 */
        gap: 5px; /* 添加间距 */
        overflow-y: auto;
        background-color: var(--el-bg-color);

        .content-item{

            width: 100%;
            height: 50px;

            .item-title,.item-con{
                width: 100%;
                padding-left: 5px;
                align-content: start;
                font-weight: bold;
                font-size: 14px;
            }
            .item-con{
                padding-left: 15px;
            }

        }
    }


    ::-webkit-scrollbar {
        width: 2px; /* 滚动条的宽度 */
        height: 2px; /* 垂直滚动条的高度 */
    }

    ::-webkit-scrollbar-track {
        background-color: rgba(245, 245, 245, 0); /* 滚动条轨道的背景颜色 */
    }

    ::-webkit-scrollbar-thumb {
        background-color: #888; /* 滚动条滑块的背景颜色 */
        border-radius: 4px; /* 滑块的圆角 */
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #888; /* 鼠标悬停时滑块的背景颜色 */
    }

}
</style>